<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {background-color: #45cbff;}
	#c1,span {background-color: #fff;}
	</style>
	<script>
	window.onload = function () {
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');			//绘制环境
	 	/*
			贝塞尔曲线：曲线会偏向控制点，至于偏向的幅度可以去深入研究。

				方法一：quadraticCurveTo(dx, dy, x1, y1);
						第一组控制点、第二组结束坐标

				方法二：bezierCurveTo(dx1, dy1, dx2, dy2, x1, y1);
						两组控制点、最后一组结束坐标
	 	*/
	 	oGC.beginPath();
	 	oGC.strokeStyle = 'red';
	 	oGC.moveTo(100, 200);
		oGC.quadraticCurveTo(100, 100, 200, 100);
		oGC.stroke();

	 	oGC.beginPath();
		oGC.strokeStyle = 'blue';
		oGC.moveTo(100, 200);
		oGC.bezierCurveTo(100, 100, 200, 200, 200,100);
		oGC.stroke();


	}
	</script>
</head>
<body>
	<canvas id="c1" width="500" height="500">
		<span>不支持canvas的浏览器</span>
	</canvas>	<!-- 默认宽300 高150 -->
</body>
</html>